<template>
  <!--模板-->
  <h1>子组件监听</h1>
  listRef： {{ listRef }}<br>
  listRef： {{ props.listRef }}<br>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, watch } from 'vue'
  type Props = {
    listRef: Array<{name: string}>,
  }
  const props = defineProps<Props>()

  watch(props.listRef, () => {
    console.log('----子组件： watch -- props.listRef：', props.listRef)

  })
  watch(props.listRef, () => {
    console.log('----子组件： 手动深层：watch -- props.listRef：', props.listRef)
  },{deep:true})

  watch(() => props.listRef, () => {
    console.log('----子组件： watch -- () => props.listRef：', props.listRef)

  })

  watch(() => props.listRef, () => {
    console.log('----子组件： 手动深层：watch -- () => props.listRef：', props.listRef)
  },{deep:true})


</script>